<template>
  <div class="home">
    <HomeMusicBar>编辑推荐</HomeMusicBar>
    <ul style="RecommendCar">
      <HomeMusicItem 
        class="card" 
        v-for="item in editerRecommendList" 
        :key="item.id" 
        :item="item" 
        
      />
    </ul>
    <HomeMusicBar>最新音乐</HomeMusicBar>
    <Loading v-if="!newsongs.length" />
    <ul style="newMusic"
     @click="$emit('update:gedan', newsongs)">
      <HomeNewMusic 
        v-for="item in newsongs" 
        :key="item.id" 
        :item="item" 
        @click.native="$emit('update:currentPlaySong',item)"
        :class="{current: item.id === currentPlaySongId}"
        :playing="playing"        
      />
    </ul>
    <HomeBottom/>
  </div>
</template>

<script>
import HomeMusicBar from '@/components/HomeMusicBar.vue'
import HomeMusicItem from '@/components/HomeMusicItem.vue'
import HomeNewMusic from '@/components/HomeNewMusic.vue'
import HomeBottom from '@/components/HomeBottom.vue'
import Loading from '@/views/Loading.vue'

export default {
  name: 'Home',
  components: {
    HomeMusicBar,
    HomeMusicItem,
    HomeNewMusic,
    HomeBottom,
    Loading
  },
  props: ['currentPlaySongId',"playing"],
  data: function(){
    return{
      editerRecommendList: [],
      newsongs: [],
    }
  },
  created: function(){
    this.axios
      .get('https://apis.netstart.cn/music/personalized?limit=6')
      .then(res => {
        this.editerRecommendList = res.data.result;
      });
    this.axios
      .get("https://apis.netstart.cn/music/personalized/newsong")
      .then((res) => {
        this.newsongs = res.data.result;
      });
  },
  
}
</script>

<style lang='less' scoped>
    .card:nth-child(3n+2){
      margin: 0 2px;
    }
    .RecommendCar{
      height: 340px;
      width: 100%;
    }
    /* .current{
      .box{
        background-color: orange;
        display: block;
      }
    } */
</style>
